define(["avalon",
    '../base/normalThings',
    "css!./avalon.checkbox.css"
], function (avalon) {
    var _interface = function () {};
    var tempstr = '<label class="aoyou-checkbox-label" ms-if="allcheck">'+
        '<i ms-if="panel" class="aoyou-checkbox" ms-class-1="aoyou-checkbox-checked:all" ms-click="_clickAll($event)"></i>'+
        '    <span ms-class="aoyou-checkbox-select:all" ms-click="_clickAll($event)">全选</span>'+
        '</label>'+
        '<label ms-each="data">'+
        '<label class="aoyou-checkbox-label" ms-attr-value="{{el.value}}" ms-attr-name="{{el.name}}">'+
        '    <i ms-if="panel" class="aoyou-checkbox" ms-class-1="aoyou-checkbox-checked:el.checked" ms-class-2="aoyou-checkbox-disabled:el.disabled" ms-click="_click($event,$index)"></i>'+
        '    <span ms-class="aoyou-checkbox-select:(el.checked&&panel)" ms-click="_click($event,$index)">{{el.text}}</span>'+
        '</label></label>';

/*    var tempstr = '<label class="aoyou-checkbox-label" ms-attr-value="{{value}}" ms-attr-id="{{id}}" ms-attr-name="{{name}}">'+
        '    <span class="aoyou-checkbox-select">{{text}}</span>'+
        '</label>';*/

    avalon.component("aoyou:checkbox", {
        $template: tempstr,
        text:"",
        value:"",
        disabled:false,
        checked:false,
        className:"",
        panel:false,
        title:"",
        allcheck: false,
        all:false,
        data:[],
        val: [], //@config 选中的checkbox value数组
        _click:_interface,
        _clickAll:_interface,
        oninit:_interface,
        onclick:_interface,
        _focus:_interface(),
        $construct: function (aaa, bbb, ccc) {
            var options = avalon.mix(aaa, bbb, ccc);
            avalon.each(options.data, function(i, it){
                if(it.checked == undefined){
                    it.checked = false;
                }
                if(it.disabled == undefined){
                    it.disabled = false;
                }

            })
            return options;
        },
        $init:function (vm,elem) {
            var val = vm.$model.val,newVal = []
            avalon.each(vm.data, function(i, newItem){
                var itemData = newItem.$model

                if(itemData.checked ==true){
                    newVal.push(itemData.value)
                }
            })
            vm.val = newVal
            vm.all = vm.val.length === vm.data.length

            vm._click = function ($event,index) {
                vm.data[index].checked = !vm.data[index].checked;
                if(vm.data[index].checked){
                    vm.val.ensure(vm.data[index].value);
                }else{
                    vm.val.remove(vm.data[index].value);
                }
                vm.onclick($event,vm);
                /*setTimeout(function(){
                    vm.all = vm.val.length === vm.data.length
                    vm.onSelect(e, vm.val, index)
                    vm.afterSelect(e, vm.data[index].check, index);
                }, 0)*/
            }
        },
        $ready:function (vm, elem) {
            vm.oninit(vm);
            vm._clickAll = function(e){
                if(vm.val.length === vm.data.length){
                    vm.val = [];
                    avalon.each(vm.data, function(i, newItem){
                        if(newItem.value){
                            newItem.checked = false;
                            vm.val.remove(newItem.value);
                        }
                    })
                }else{
                    avalon.each(vm.data, function(i, newItem){
                        if(newItem.value){
                            newItem.checked = true;
                            vm.val.ensure(newItem.value);
                        }
                    })
                }
                vm.all = vm.val.length === vm.data.length
                vm.oninit(vm);
            }
        }
    });
    
});
    
